<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>练习</title>
    <script src="../../js/vue.js"></script>
</head>
<style>
    #app {
        margin: 5rem auto;
        width: 50%;
    }
    
    table {
        width: 100%;
    }
    
    table,
    tr,
    td,
    th {
        border: 1px solid gray;
        border-collapse: collapse;
        text-align: center;
    }
    
    td,
    th {
        padding: 0.5rem;
    }
    
    tr:nth-child(2) {
        border-top: 1.5px solid gray;
    }
    
    p {
        font-size: 1.5rem;
    }
</style>

<body>
    <div id="app">
        <table>
            <tr>
                <th>编号</th>
                <th>图书名称</th>
                <th>价格</th>
                <th>数量</th>
            </tr>
            <tr>
                <td>1</td>
                <td>vue从入门到精通</td>
                <td>{{dollar_1}}</td>
                <td>{{count_1}}</td>
            </tr>
            <tr>
                <td>2</td>
                <td>软件工程</td>
                <td>{{dollar_2}}</td>
                <td>{{count_2}}</td>
            </tr>
            <tr>
                <td>3</td>
                <td>数据结构</td>
                <td>{{dollar_3}}</td>
                <td>{{count_3}}</td>
            </tr>
            <tr>
                <td>4</td>
                <td>数据库原理</td>
                <td>{{dollar_4}}</td>
                <td>{{count_4}}</td>
            </tr>
        </table>
        <p>总价: {{sub|fixed}}</p>
    </div>
    <script>
        var v_app = new Vue({
            el: "#app",
            data: {
                dollar_1: 50,
                dollar_2: 80,
                dollar_3: 60,
                dollar_4: 70,
                count_1: 1,
                count_2: 3,
                count_3: 2,
                count_4: 4,
            },
            methods: {
                add() {
                    this.count++;
                },
                jian() {
                    if (this.count > 0) {
                        this.count--;
                    }
                }
            },
            computed: {
                sub() {
                    return (Number(this.dollar_1) * Number(this.count_1)) + (Number(this.dollar_2) * Number(this.count_2)) +
                        (Number(this.dollar_3) * Number(this.count_3)) + (Number(this.dollar_4) * Number(this.count_4));
                }
            },
            filters: {
                fixed(str) {
                    return str.toFixed(2);
                }
            }
        });
    </script>
</body>

</html>